<template>
  <div id="public">
    <!--搜索-->
    <div class="search-content">
      <div style="display:flex;flex-wrap: wrap">
        <el-card shadow="never" class="card card1">
          <i class="el-icon-document-checked"></i>
          总订单数：{{count.totalNum}}
        </el-card>
        <el-card shadow="never" class="card card2">
          <i class="el-icon-document-checked"></i>
          总金额：{{count.totalMoney}}
        </el-card>
        <el-card shadow="never" class="card card3">
          <i class="el-icon-document-checked"></i>
          总退款金额：{{count.totalRefund}}
        </el-card>
        <el-card shadow="never" class="card card3">
          <i class="el-icon-document-checked"></i>
          总利润金额：{{count.totalProfit}}
        </el-card>
      </div>
      <el-input v-model="sn" placeholder="请输入订单编号查询" prefix-icon="el-icon-search" clearable @change="inquiryList" />
      <el-select v-model="orderType" clearable placeholder="订单类型"  @change="inquiryList" >
        <el-option
          v-for="item in orderTypeList"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <el-date-picker
        v-model="dateTimeRange[0]"
        type="datetime"
        clearable
        value-format="yyyy-MM-dd HH:mm:ss"
        placeholder="开始日期">
      </el-date-picker>
       <el-date-picker
        v-model="dateTimeRange[1]"
        type="datetime"
        clearable
        value-format="yyyy-MM-dd HH:mm:ss"
        placeholder="结束日期">
      </el-date-picker>
      <el-button type="primary" icon="el-icon-search" @click="inquiryList">查询</el-button>
    </div>
    <!--操作列表-->
    <div class="table">
      <el-table fit :data="tableData" style="width: 100%">
        <el-table-column label="订单编号" prop="orderSn" width="150" align="center"/>
        <el-table-column label="订单金额" prop="amount" width="80" align="center"/>
        <el-table-column label="退款金额" prop="refundAmount" width="80" align="center"/>
        <el-table-column label="用户名称" prop="memberName" width="150" align="center"/>
        <el-table-column label="分润比例" prop="proportion" width="80" align="center"/>
        <el-table-column label="分润金额" prop="profit" width="80" align="center"/>
        <!-- <el-table-column label="用户名称" prop="memberName" width="80" align="center"/> -->
        <el-table-column label="订单类型" prop="orderType" width="150"  align="center" />
        <el-table-column label="订单时间" prop="orderTime" width="170" align="center"/>
        <el-table-column label="备注" prop="remarks"  align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.remarks.length<40">{{scope.row.remarks}}</span>
            <el-tooltip v-else :content="scope.row.remarks" placement="top">
              <span>{{scope.row.remarks.substring(0,40)+"..."}}</span>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <!--分页-->
      <div class="pagination">
        <el-pagination
          :current-page.sync="currentPage"
          :page-sizes="[10,20,30,40,50]"
          layout="total,sizes, prev, pager, next"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
    import {Message} from 'element-ui';
  import request from "../../utils/request";
    export default {
        name: "memberVipRecord",
      data(){
        return{
          // 查询
          sn:"",
          orderType:null,
          orderTypeList:[
            {
              value: '0,1',
              label:'充值金币'
            },
            {
              value: '2,3',
              label:'升级会员'
            }
          ],
          dateTimeRange:[],
          isClearable:true,
          // 列表数据
          tableData:[],
          //分页
          currentPage: 1,
          pageSize:10,
          total: 0,
          count:{
            totalNum: 0,
            totalMoney: 0,
            totalRefund: 0,
            totalProfit: 0
          }
        }
      },
      mounted() {
        this.inquiryList();
      },
      methods:{
        isNotNull(value){
          return value !== null && value !== undefined && value !== "";
        },
        //查询列表
        inquiryList(){
          let that=this;
          that.tableData=[];
          let data={
            pageNumber:that.currentPage,
            pageSize:that.pageSize,
            filters:[]
          };
          if(that.isNotNull(that.sn)){ //订单编号
            data.filters.push({
              property:"o.sn",
              value:that.sn,
              operator: "eq"
            })
          }
          if(that.isNotNull(that.orderType)){ //订单编号
            data.filters.push({
              property:"o.order_type",
              value:that.orderType,
              operator: "in"
            })
          }
          if(this.isNotNull(that.dateTimeRange)){ //创建时间
            data.filters.push({
              property:"o.create_date",
              value:that.dateTimeRange[0],
              operator: "ge"
            });
            data.filters.push({
              property:"o.create_date",
              value:that.dateTimeRange[1],
              operator: "le"
            })
          }
          request({
            method: 'post',
            url: '/agent/profit/order/list',
            headers:{
              'Content-Type': 'application/json;charset=UTF-8'
            },
            data:data
          }).then(function (res) {
            if(res.code===200){
              that.total=res.data.total;
              let arr=res.data.records;
              if(arr.length===0){
                that.tableData=[];
              }else{
                that.tableData=arr
              }
            }
          }).catch(function (error) {
            console.log(error);
          });
          //统计接口
          request({
            method: 'post',
            url: '/agent/profit/order/count',
            headers:{
              'Content-Type': 'application/json;charset=UTF-8'
            },
            data:data
          }).then(function (res) {
            if(res.code===200){
              that.count=res.data;
            }
          }).catch(function (error) {
            console.log(error);
          });
        },
        // 改变每页显示的数量
        handleSizeChange(val) {
          this.pageSize=val;
          this.inquiryList();
        },
        //改变当前页
        handleCurrentChange(val) {
          this.currentPage=val;
          this.inquiryList();
        }
      }
    }
</script>

<style scoped src="../../assets/css/publicCss/publicStyle.css">

</style>
